<template>
	<div class="topTab">
		<!-- 头部 -->
		<div class="header" >
			<span @click="back" class="back"></span>
			<h6>{{ topTabTitle }}</h6>
			<span @click="more" class="more"></span>
		</div>
		<!-- 更多 -->
		<div v-show="moreShow" class="more-men">
			<ul class="more-option">
				<span class="triangle"></span>
				<li class="more-list" @click="kipt(more.router)" v-for="more in moreList" :key="more.index">
					<span :class="more.backImg"></span>
					<p>{{ more.title }}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: 'topTab',
	props: ['topTabTitle'],
	data() {
		return {
			moreShow: false,
			moreList: [
				{
					title: '首页',
					router: '/home',
					backImg: 'home'
				},
				{
					title: '分类',
					router: '/sort',
					backImg: 'sort'
				},
				{
					title: '购物车',
					router: '/cart',
					backImg: 'cart'
				},
				{
					title: '我的',
					router: '/myIndex',
					backImg: 'my'
				}
			]
		};
	},
	methods: {
		/* 返回 */
		back() {
			this.$router.go(-1);
		},

		/* 更多 */
		more() {
			this.moreShow = !this.moreShow;
		},

		/* 跳转 */
		kipt(kiptRouter) {
			let thisPath = this.$route.path;
			// let toFullPath = localStorage.getItem("toFullPath");
			if (thisPath == kiptRouter) {
				window.location.reload();
				// this.moreShow = !this.moreShow;
			} else {
				this.$router.push(kiptRouter);
				if (kiptRouter == '/myIndex') {
					window.location.reload();
				}
			}
		}
	},
	created() {},
	mounted() {
		document.querySelector('.more-men').style.height = document.documentElement.clientHeight + 'px';
	}
};
</script>

<style >
* {
	padding: 0;
	margin: 0;
	list-style: 0;
	box-sizing: border-box;
}
.topTab{
	width: 100%;
	height: 0.92rem;
}
/* 头部 */
.header {
	width: 100%;
	height: 0.92rem;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.20rem;
	border-bottom: 0.01rem solid #ddd;
}

.back {
	width: 45px;
	height: 40px;
	background-repeat: no-repeat;
	background-image: url(http://i.huasongwang.com/i/c/icon6.png);
	background-position: -66px 6px;
	background-size: 100px;
}

.more {
	background-repeat: no-repeat;
	background-image: url(http://i.huasongwang.com/i/c/icon6.png);
	background-position: -25px 0;
	width: 45px;
	background-size: 90px;
	height: 30px;
	/* background-color: skyblue; */
}

.header h6 {
	font-size: 0.33rem;
	color: #666666;
}
/* 更多按钮 */
.more-men {
	position: fixed;
	top: 0.92rem;
	z-index: 10;
	width: 100%;
	background: rgba(0, 0, 0, 0.5);
}

.more-option {
	width: 2.04rem;
	height: 3rem;
	background-color: white;
	float: right;
	margin-top: 0.5rem;
	margin-right: 0.2rem;
	position: relative;
}

.triangle {
	position: absolute;
	top: -0.26rem;
	right: 10px;
	width: 26px;
	height: 22px;
	background-position: 0px 1px;
	background-image: url(http://i.huasongwang.com/i/c/search_top.png);
	background-repeat: no-repeat;
}

.more-list {
	width: 100%;
	height: 25%;
	border-bottom: gainsboro solid 0.01rem;
	display: flex;
	align-items: center;
	padding-left: 0.2rem;
}

.more-list span {
	width: 22px;
	height: 22px;
	background-image: url(http://i.huasongwang.com/i/c/icon6.png);
	background-repeat: no-repeat;
	background-size: 400%;
}

.home {
	background-position: -5px -46px;
}

.sort {
	background-position: -26px -46px;
}

.cart {
	background-position: -45px -46px;
}

.my {
	background-position: -65px -46px;
}
.more-list p {
	padding-left: 0.2rem;
	color: #666666;
}
</style>
